<template>
  <div class="login-page">
      <div class="login-container">
        <h3>WoJuFang</h3>
        <div style="margin: 20px" />
        <el-form label-width="70px" :model="user" style="max-width: 50vw" ref="ruleFormRef" :rules="rules" class="form">
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="user.username" placeholder="请输入用户名" label-width="50px" />

          </el-form-item>
          <el-form-item label="密&emsp;码:" prop="password">
            <el-input v-model="user.password" placeholder="请输入密码" type="password" show-password />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked" class="rem" label="记住用户名与密码"/>
          </el-form-item>
          <el-form-item>
            <el-button class="button" type="primary" @click="handleLogin">登录</el-button>
            <!-- <el-button class="button" type="primary" @click="handleRegister">注册</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import router from '../../router'
import { login } from '../../api/login'

// 对称加解密使用到的密钥
const ruleFormRef = ref()
const checked = ref(false)
const user = reactive({
  username: '',
  password: '',
  checked: false,
})
const rules = reactive({
  username: [
    {
      required: true,
      message: '用户名为必填项!!!',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码为必填项!!!',
      trigger: 'blur',
    },
  ],
})

// 登录保存查询
const info = localStorage.getItem('login-info')
if (info) {
  const [username, password] = info.split(':::::')
  checked.value = true
  user.username = username
  user.password = password
}

const handleLogin = async () => {

  // 发送网络请求
  const result = await login(user)
  console.log('result:', result)
  // 判断登录结果
  // if (result.status === 200) { // 登录成功
    const { token:string} = result
    // 判断是否有勾选记住用户，如果有勾选，则将用户名与密码进行加密保存到本地，否则删除保存的数据
    if (checked.value) { // 勾选
      /* 将用户名与密码连接后进行加密保存 */
      const payload = `${user.username}:::::${user.password}`
      // 加密
      // const hash = CryptoJS.AES.encrypt(payload, secret).toString()
      // 保存
      localStorage.setItem('login-info', payload)
    } else { // 未勾选
      localStorage.removeItem('login-info')
    }
    // 将登录成功的 token 数据保存
    // localStorage.setItem('token', result.token as string)
    // 跳转页面: 编程式导航
    // navigate('/dashboard')
    ElMessage.success('登录成功')
    sessionStorage.setItem('token', result.token)
    router.push('/home')
  // } else { // 登录失败
  //   ElMessage.error('用户名或密码错误')
  // }
}

// 去注册页面
const handleRegister = () => {
  router.push('/register')
}
</script>

<style lang= "less" scoped>
@bg-color: white;

// 嵌套书写
.login-page {
  background: url('../../assets/bj.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  .img_one {
    width: calc(100% - 65vw);
    height: 70vh;
  }

  .login-container {
    width: calc(100% - 65vw);
    height:60vh;
    opacity: .9;
    background: rgb(247, 247, 247);
    padding: 30px;
    box-sizing: border-box;
    min-width: 380px;
    border-radius: 10px;
    position: absolute;
    top: calc(100% - 80vh);
    right: 10%;
    .el-form-item {
      margin-left: 30px;
    }

    .el-input {
      width: 320px;
    }
      .img_two {
        width: 120px;
        margin-top: -5px;
      }
    }
    h3 {
        font-size: 26px;
        color: #494948;
        font-family: '思源黑体 CN';
        text-align: center;
        margin-bottom: 66px;
      }

    .button {
      width: 320px;
      height: 40px;
      color: #FFF;
      font-size: 20px;
      background: #82817f;
      border: 0;
      border-radius: 10px;
      margin-top: 30px;
      margin-bottom: 10px;
    } 
    .rem {
      color: #494948;
    }
  }

</style>
